<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box div {width: 200px; height: 200px; border:1px solid #45dfff;display: none;}
		.active {background-color: #45dfff;}
	</style>
	<script src="jquery-1.10.1.min.js"></script>
	<script type="text/javascript">
	$(function (){
		$('input').click(function (){
			$('input').attr('class', '');
			$('#box').find('div').css('display', 'none').eq( $(this).index() ).css('display', 'block');

			$(this).attr('class', 'active');
			//$('#box').find('div').eq( $(this).index() ).css('display', 'block');		//可以继续简化到上面
		})
	})
	</script>
</head>
<body>
	<input type="button" value="1" />
	<input type="button" value="2" />
	<input type="button" value="3" />
	<div id="box">
		<div style="display:block">11111</div>
		<div>22222</div>
		<div>33333</div>
	</div>
</body>
</html>